<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket CRUD 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .log {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            height: 200px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>WebSocket CRUD 示例</h1>

    <label for="clientId">客户端 ID：</label>
    <input type="text" id="clientId" value="client123" readonly><br><br>

    <button onclick="connect()">连接 WebSocket</button>
    <button onclick="disconnect()" disabled>断开连接</button><br><br>

    <h3>操作</h3>
    <label for="key">Key：</label>
    <input type="text" id="key" placeholder="输入 Key"><br><br>

    <label for="value">Value：</label>
    <input type="text" id="value" placeholder="输入 Value"><br><br>

    <button onclick="create()">新增数据</button>
    <button onclick="read()">查询数据</button>
    <button onclick="update()">更新数据</button>
    <button onclick="remove()">删除数据</button>

    <h3>日志</h3>
    <pre id="log" class="log"></pre>
</div>

<script>
    let socket;
    const clientId = document.getElementById('clientId').value;

    // 连接 WebSocket
    function connect() {
        try {
            socket = new WebSocket(`ws://localhost:8001/websocketTest001/haha`);

            socket.onopen = () => {
                logMessage('WebSocket 连接已建立');
                document.querySelector('button[onclick="connect()"]').disabled = true;
                document.querySelector('button[onclick="disconnect()"]').disabled = false;
            };

            socket.onmessage = (event) => {
                logMessage(`收到消息: ${event.data}`);
            };

            socket.onclose = () => {
                logMessage('WebSocket 连接已关闭');
                document.querySelector('button[onclick="connect()"]').disabled = false;
                document.querySelector('button[onclick="disconnect()"]').disabled = true;
            };

            socket.onerror = (error) => {
                logMessage(`WebSocket 错误: ${error.message}`);
            };
        } catch (error) {
            logMessage(`连接失败: ${error.message}`);
        }
    }

    // 断开 WebSocket 连接
    function disconnect() {
        if (socket && socket.readyState === WebSocket.OPEN) {
            socket.close();
        }
    }

    // 新增数据
    function create() {
        const key = document.getElementById('key').value.trim();
        const value = document.getElementById('value').value.trim();

        if (!key || !value) {
            alert('请输入 Key 和 Value');
            return;
        }

        sendMessage({
            action: 'create',
            key,
            value
        });
    }

    // 查询数据
    function read() {
        const key = document.getElementById('key').value.trim();

        if (!key) {
            alert('请输入 Key');
            return;
        }

        sendMessage({
            action: 'read',
            key
        });
    }

    // 更新数据
    function update() {
        const key = document.getElementById('key').value.trim();
        const value = document.getElementById('value').value.trim();

        if (!key || !value) {
            alert('请输入 Key 和 Value');
            return;
        }

        sendMessage({
            action: 'update',
            key,
            value
        });
    }

    // 删除数据
    function remove() {
        const key = document.getElementById('key').value.trim();

        if (!key) {
            alert('请输入 Key');
            return;
        }

        sendMessage({
            action: 'delete',
            key
        });
    }

    // 发送消息到 WebSocket
    function sendMessage(data) {
        if (socket && socket.readyState === WebSocket.OPEN) {
            socket.send(JSON.stringify(data));
            logMessage(`发送消息: ${JSON.stringify(data)}`);
        } else {
            logMessage('WebSocket 未连接');
        }
    }

    // 记录日志
    function logMessage(message) {
        const logElement = document.getElementById('log');
        logElement.textContent += `${message}\n`;
        logElement.scrollTop = logElement.scrollHeight; // 自动滚动到底部
    }
</script>
</body>
</html>